<template>
  <div class="table personInfo">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-friendadd"></i>组织类型——维护详情
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="content_diy">
        <ul>
          <li>
            <h2>账号信息:</h2>
            <dl class="dl_diy">
              <dd>
                <label>账号名称：</label>
                <p>{{Info.user_name}}</p>
              </dd>
              <dd>
                <label>账号头像：</label>
                <p>
                  <img :src="Info.user_header_img" preview="0" preview-text="账号头像">
                </p>
              </dd>
              <dd>
                <label>账号介绍：</label>
                <div class="js">{{Info.user_introduce}}</div>
              </dd>
            </dl>
          </li>
          <li>
            <h2>组织信息:</h2>
            <dl class="dl_diy">
              <dd>
                <label>组织名称：</label>
                <p>{{Info.organization_name}}</p>
              </dd>
              <dd>
                <label>联系方式：</label>
                <p>{{Info.organization_phone}}</p>
              </dd>
              <dd>
                <label>组织邮箱：</label>
                <p>{{Info.mailbox}}</p>
              </dd>
              <dd>
                <label>具体地址：</label>
                <p>{{Info.address}}</p>
              </dd>
              <dd>
                <label>组织证件号码：</label>
                <p>{{Info.organization_id_num}}</p>
              </dd>
              <dd>
                <label>组织证件照片：</label>
                <p>
                  <img :src="Info.organization_certificates" preview="1" preview-text="组织证件照片">
                </p>
              </dd>
            </dl>
          </li>
          <li>
            <h2>负责人信息:</h2>
            <dl class="dl_diy">
              <dd>
                <label>姓名：</label>
                <p>{{Info.operator_name}}</p>
              </dd>
              <dd>
                <label>手机号码：</label>
                <p>{{Info.operator_phone}}</p>
              </dd>
              <dd>
                <label>负责人身份证号：</label>
                <p>{{Info.operator_id_num}}</p>
              </dd>
              <dd>
                <label>负责人身份证正面照片：</label>
                <p>
                  <img :src="Info.operator_id_card_a" preview="2" preview-text="身份证正面照片">
                </p>
              </dd>
            </dl>
          </li>
          <li>
            <h2>补充信息:</h2>
            <dl class="dl_diy">
              <dd>
                <label>材料证明照片：</label>
                <p>
                  <img :src="Info.evidence" preview="3" preview-text="材料证明">
                </p>
              </dd>
              <dd>
                <label>官网地址：</label>
                <p>{{Info.website}}</p>
              </dd>
            </dl>
          </li>
          <li v-if="showIF">
            <h2>驳回原因:</h2>
            <div class="bhyy">{{Info.turn_down}}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from "../../../http/api.js";
export default {
  data() {
    return {
      id: this.$route.query.id, // 这个id 就是 列表通过路由的参数 传递过来的 媒体id
      Info: {}, //总数据
      Token: sessionStorage.getItem("Token"), //每次登陆的token
      showIF:false
    };
  },
  methods: {
    getData() {
      //获取列表信息
      this.$post(api.view_information, {
        token: this.Token,
        media_id: this.id
      }).then(res => {
        if (res.status == "0") {
          this.Info = res.data;
          //如果是驳回的话，显示驳回原因
          if(res.data.status="2"){
            this.showIF=true;
          }
        } else {
          this.$message.error(res.msg);
        }
        // 如果登录过期
        if (res.status == "relogin") {
          this.$message.error(res.msg);
          this.$router.push("/login");
        }
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>
<style scoped>
ul li {
  list-style: none;
}
.container .title {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.content_diy ul li {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.content_diy ul li h2 {
  color: #f00;
  font-size: 18px;
}
.bhyy{
  width: 60%;
  margin: 0 auto;
}
.dl_diy {
  width: 60%;
  margin: 0 auto;
}
.dl_diy dd {
  display: flex;
  justify-content: flex-start;
  border: 1px solid #d2cccc;
  border-radius: 3px;
  margin-top: -1px;
}
.dl_diy dd label {
  font-size: 16px;
  font-weight: bold;
  flex: 2;
  padding: 10px 0;
  text-align: center;
  border-right: 1px solid #d2cccc;
}
.dl_diy dd p {
  flex: 8;
  color: #000;
  font-size: 14px;
  padding: 10px;
  box-sizing: border-box;
}
.dl_diy dd p img  {
  max-width: 100%;
}
.dl_diy dd .js {
  flex: 8;
  color: #000;
  font-size: 14px;
  padding: 10px;
  box-sizing: border-box;
}
.center {
  text-align: center;
}
.el-dialog__header {
  border-bottom: 1px solid #ccc;
}
</style>
